<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <title>Title</title>
    <!--    <script src="../../tempresources/vue.js"></script>-->
    <!--    <script src="../../tempresources/axios.js"></script>-->
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<style>
    body{
        background-image: url("../../img/v2-cb8198799ca848b78bac864e9cbc377d_r.jpg");
    }
    #app{
        width: 400px;
        height: 250px;
        background-color: cornsilk;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

    }
    #a{
        height:10%;
        text-align: center;
    }
    #reset-button{
        text-align: center;
    }
    #kong{
        height: 20px;
    }
</style>

<body>
<div id="a"><h1><font color="#f0ffff">注册界面</font></h1></div>
<div id='app'>
    用户名：
    <input type="text" v-model="user.username"></br>
    密码：&nbsp;&nbsp;&nbsp;
    <input type="password" v-model="user.passwd"></br>
    <div id="kong"></div>

    <div id="reset-button"><button @click="sub()">注册</button>
    </div>
    <span><font color="#ff2018">{{msg}}</font></span>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            user:{
                name:'',
                passwd:""
            },
            msg:''
        },
        methods:{
            sub(){
                var _this=this
                let data=this.user
                axios({
                        url:"/user/register",
                        method:"post",
                        data:data
                    }
                ).then(function (res){
                        const ret=res.data
                        if(ret.code == 1){
                            alert("注册成功")
                            window.top.location.href= 'login.html'//跳转页面
                        }
                        else
                            _this.msg=ret.msg
                    }
                )
            }
        }
    })
</script>
</body>
</html>